/*
 * @description: 新增/编辑商品
 * @Author: along
 * @Date: 2020-04-07
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <div class="container goodEditGroup">
        <!-- tabs -->
        <div class="_tabs">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基础信息" name="first" />
                <el-tab-pane label="规格与库存" name="second" />
                <el-tab-pane label="图文描述" name="third" />
            </el-tabs>
        </div>
        <div class="_tabs_view"></div>

        <!-- form -->
        <div class="_ruleForm_wrap">
            <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="_ruleForm">

                <!-- 基础信息 -->
                <template>
                    <div id="first">基础信息</div>
                    <div class="first_form">

                        <!-- 商品类型 -->
                        <el-form-item
                            label="商品类型："
                            prop="goods_type"
                        >
                            <el-radio
                                v-model="formData.goods_type"
                                :label="1"
                                :disabled="isEdit"
                            >
                                普通商品
                            </el-radio>
                            <el-radio
                                v-model="formData.goods_type"
                                :label="8"
                                :disabled="isEdit"
                            >
                                虚拟商品
                            </el-radio>
                        </el-form-item>

                        <!-- 是否二手 -->
                        <el-form-item
                            label="是否二手："
                            v-if="formData.goods_type == 1"
                        >
                            <el-radio
                                v-model="formData.is_second_hand"
                                :label="0"
                            >
                                否
                            </el-radio>
                            <el-radio
                                v-model="formData.is_second_hand"
                                :label="1"
                            >
                                是
                            </el-radio>
                        </el-form-item>

                        <!-- 跨境商品 -->
                        <el-form-item
                            label="跨境商品："
                            v-if="formData.goods_type == 1"
                        >
                            <el-radio
                                v-model="formData.is_cross_border"
                                :label="0"
                            >
                                否
                            </el-radio>
                            <el-radio
                                v-model="formData.is_cross_border"
                                :label="1"
                            >
                                是
                            </el-radio>
                            <el-popover
                                placement="top-start"
                                width="400"
                                trigger="hover"
                                content="* 跨境商品是指经由海外正规渠道采购，并进行预申报备案，全程在海关、检验检疫部门的监管下，提前存储在海关特殊监管区域的商品。"
                                class="zd-cate-provide"
                            >
                                <i
                                    class="iconfont"
                                    slot="reference"
                                    style="position: relative; top: 0.5px;left:-20px;z-index:999;font-size:16px;color:rgba(153, 153, 153, 1);cursor:pointer;"
                                >&#xe704;</i>
                            </el-popover>
                        </el-form-item>

                        <!-- 商品名称 -->
                        <el-form-item
                            prop="goods_title"
                            label="商品名称："
                        >
                            <el-input
                                placeholder="请输入商品名称，不超过30个字"
                                v-model="formData.goods_title"
                                size="small"
                                maxlength="30"
                                show-word-limit
                                :style="{width: '600px'}"
                            />
                        </el-form-item>

                        <!-- 商品分类 -->
                        <el-form-item
                            prop="goodType"
                            label="商品分类："
                        >
                            <el-cascader
                                v-model="formData.goodType"
                                :options="types"
                                :props="{
                                    value: 'no',
                                    label: 'title',
                                    children: 'children'
                                }"
                                expand-trigger="click"
                                clearable
                                size="small"
                                :filterable="true"
                                placeholder="请填写商品分类"
                                separator="-"
                                :style="{width: '300px'}"
                            />
                        </el-form-item>

                        <!-- 商品货号 -->
                        <el-form-item
                            prop="goods_number"
                            label="商品货号："
                        >
                            <el-input
                                placeholder="选填"
                                v-model="formData.goods_number"
                                size="small"
                                :style="{width: '300px'}"
                            />
                        </el-form-item>

                        <!-- 商品排序 -->
                        <el-form-item
                            prop="goods_sort"
                            label="商品排序："
                        >
                            <el-input
                                placeholder="数字越小，排列越前"
                                v-model="formData.goods_sort"
                                size="small"
                                type="number"
                                :style="{width: '300px'}"
                            /><span style="display:inline-block;color:#999;margin-left:12px">*店铺首页的商品按此处的数字大小排序，数字越小，排列就越靠前！</span>
                        </el-form-item>

                        <!-- 上架时间 -->
                        <el-form-item
                            prop="shelf_time"
                            label="上架时间："
                        >
                            <el-date-picker
                                v-model="formData.shelf_time"
                                value-format="timestamp"
                                type="datetime"
                                size="small"
                                placeholder="请选择时间"
                                :style="{width: '300px'}"
                            />
                        </el-form-item>

                        <!-- 失效时间 -->
                        <el-form-item
                            prop="expire_time"
                            label="失效时间："
                        >
                            <el-date-picker
                                v-model="formData.expire_time"
                                type="datetime"
                                size="small"
                                value-format="timestamp"
                                placeholder="请选择时间"
                                :style="{width: '300px'}"
                            /><span style="display:inline-block;color:#999;margin-left:12px">*空意味着永不过期</span>
                        </el-form-item>

                        <!-- *仅二手商品生效字段 -->
                        <template v-if="formData.is_second_hand">
                            <el-form-item
                                prop="production_time"
                                label="生产时间："
                            >
                                <el-date-picker
                                    v-model="formData.production_time"
                                    type="datetime"
                                    size="small"
                                    value-format="timestamp"
                                    placeholder="请选择时间"
                                    :style="{width: '300px'}"
                                />
                            </el-form-item>
                            <el-form-item
                                prop="quality_guarantee_period"
                                label="保质期："
                            >
                                <el-input
                                    placeholder="选填"
                                    v-model="formData.quality_guarantee_period"
                                    size="small"
                                    :style="{width: '300px'}"
                                    oninput="value = value.replace(/[^\d]/g,'')"
                                />
                                <span style="color:rgba(0, 0, 0, 0.25);position: relative;top:0px;left:-26px;font-size:14px">天</span>
                            </el-form-item>
                            <el-form-item
                                prop="almost_new"
                                label="几成新："
                            >
                                <el-input
                                    placeholder="选填"
                                    v-model="formData.almost_new"
                                    size="small"
                                    :style="{width: '300px'}"
                                    oninput="value = value.replace(/[^\d]/g,'')"
                                />
                                <span style="color:rgba(0, 0, 0, 0.25);position: relative;top:0px;left:-26px;font-size:14px">成</span>
                            </el-form-item>
                        </template>

                        <!-- 所属类目 -->
                        <el-form-item
                            prop="agent_cate_no"
                            label="所属类目："
                        >
                            <el-select
                                v-model="formData.agent_cate_no"
                                placeholder="选填"
                                size="small"
                                :style="{width: '300px'}"
                            >
                                <el-option
                                    v-for="item in cateList"
                                    :key="item.cate_no"
                                    :label="item.cate_name"
                                    :value="item.cate_no"
                                />
                            </el-select>
                            <el-popover
                                placement="top-start"
                                width="400"
                                trigger="hover"
                                content="* 这里选择的类目，就是校园代理根据自己的兴趣和专业选择来代理的商品类目，比如：A选择代理了化妆品类，那么A将会推销所有属于化妆品类的商品，因为他会得到该类目下商品销售的佣金提成"
                                class="zd-cate-provide"
                            >
                                <i
                                    class="iconfont"
                                    slot="reference"
                                    style="position: relative;top: 1.5px; left: 15px;z-index:999;font-size:16px;color:rgba(153, 153, 153, 1);cursor:pointer;"
                                >&#xe704;</i>
                            </el-popover>
                        </el-form-item>

                        <!-- 其他收货信息 -->
                        <el-form-item
                            prop="virtual_buy_info_type"
                            label="其他收货信息："
                            v-if="formData.goods_type !== 1"
                        >
                            <el-radio-group v-model="formData.virtual_buy_info_type">
                                <el-radio :label="0">
                                    无
                                </el-radio>
                                <el-radio :label="2">
                                    收件人QQ号
                                </el-radio>
                                <el-radio :label="4">
                                    收件人邮箱
                                </el-radio>
                                <el-radio :label="1">
                                    自定义
                                    <el-input
                                        v-model="formData.virtual_buy_info_other"
                                        placeholder="请输入自定义收货信息，如游戏账号"
                                        size="small"
                                        maxlength="10"
                                        show-word-limit
                                        :style="{width: '308px', marginLeft: '15px'}"
                                    />
                                </el-radio>
                            </el-radio-group>
                            <p :style="{color: 'rgba(153, 153, 153, 1)', fontSize: '12px'}">
                                *购买虚拟商品时让买家填写其他收货信息（其他收货信息是指除收件人手机号以外的信息）
                            </p>
                        </el-form-item>
                    </div>
                </template>

                <!-- 规格与库存 -->
                <template>
                    <div class="_tabs_view"></div>
                    <div id="second">规格与库存</div>
                    <div class="second_form">
                        <el-form-item
                            label="佣金比例："
                            prop="goods_commission_rate"
                            :style="{marginTop: '10px'}"
                        >
                            <el-input
                                placeholder="请填写佣金比例"
                                v-model="formData.goods_commission_rate"
                                size="small"
                                type="number"
                                class="good-input"
                                maxlength="10"
                                :style="{width: '300px'}"
                            />
                            <span style="color:#999;padding-left:10px;position:relative;left:-36px">
                                %
                            </span>
                            <span
                                v-if="commission_tax_status"
                                style="color:#999;padding-left:10px;margin-left:-28px"
                            >
                                *加上佣金的6%的发票税，真实佣金比例为：{{ (formData.goods_commission_rate * 1.06).toFixed(2) }}%
                            </span>
                        </el-form-item>
                        <el-form-item
                            label="商品规格："
                            prop="goods_spec_json"
                            :style="{marginTop: '4px'}"
                        >
                            <div class="_spec_set">
                                <div class="_spec_title">
                                    规格设置：<p class="_spec_desc">主规格不可轻易更改,更改后订单会产生错误</p>
                                </div>
                                <div class="_spec_wrap">
                                    <div class="_spec_tab">
                                        <p class="_spec_tab_title">规格名</p>
                                        <p class="_spec_tab_title">规格值</p>
                                        <p class="_spec_tab_title">操作</p>
                                    </div>
                                    <!-- 生成规格 -->
                                    <template v-if="specList.length">
                                        <div
                                            class="_spec_items"
                                            v-for="(row,index) in specList"
                                            :key="index"
                                        >
                                            <!-- 主规格 -->
                                            <div class="_spec_main">
                                                <i
                                                    class="iconfont icon-check_box_sel"
                                                    @click="handleRemoveSpec({values: [{}]}, index, index)"
                                                ></i>
                                                <el-input
                                                    placeholder="请输入规格名如颜色/尺码"
                                                    v-model="row.spec_name"
                                                    size="medium"
                                                    :style="{marginRight: '6px'}"
                                                />
                                            </div>
                                            <!-- 子规格 -->
                                            <div class="_spec_children">
                                                <div
                                                    class="_spec_child"
                                                    v-for="(option, idx) in row.values"
                                                    :key="idx"
                                                >
                                                    <el-input
                                                        placeholder="请输入规格值如红色/蓝色/S/L"
                                                        v-model="option.spec_value"
                                                        size="medium"
                                                        :style="{marginLeft: '3.6%', marginRight: '4.5%', width: '64%'}"
                                                    />
                                                    <div class="_spec_button">
                                                        <p
                                                            class="_spec_remove"
                                                            @click="handleRemoveSpec(row, idx, index)"
                                                        >
                                                            删除
                                                        </p>
                                                        <p
                                                            v-if="idx === row.values.length - 1"
                                                            class="_spec_new_add"
                                                            @click="handleAddValues(row, idx)"
                                                        >
                                                            添加规格值
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                    <div class="_spec_add" @click="handleAddSpec()">
                                        <i class="iconfont icon-jiahao"></i>
                                        添加主规格
                                    </div>
                                    <div class="_spec_confirm" v-if="specList.length" @click="handleConfirmSpec()">确认添加新规格</div>
                                </div>
                            </div>

                            <!-- sku -->
                            <div class="_spec_sku">
                                <div class="_spec_sku_items">
                                    <p class="_spec_sku_number">1、</p>
                                    <p class="_spec_sku_content">为了方便您的操作，以下不同规格的商品价格默认一致，如要修改，建议在创建全部规格之后，一次性修改。</p>
                                </div>
                                <div class="_spec_sku_items">
                                    <p class="_spec_sku_number">2、</p>
                                    <p class="_spec_sku_content">下方分佣金额是按当前商品规格的学生价×佣金比例计算得出，分佣金额仅供参考，实际分佣金额以实付金额×佣金比例计算为准，如果商品 受平台活动优惠，实际分佣金额则按（实付金额+平台补贴）×佣金比例计算。</p>
                                </div>
                                <div class="_sku_tab">
                                    <div class="_sku_batch">
                                        <p class="_sku_batch_title">批量设置</p>
                                        <el-input
                                            placeholder="学生价"
                                            v-model="batchSpec.product_price"
                                            size="medium"
                                            class="_sku_input _sku_first_input"
                                            oninput="value=value.replace(/[^0-9.]/g,'')"
                                        />
                                        <el-input
                                            placeholder="分佣金额"
                                            v-model="batchSpec.product_commission"
                                            size="medium"
                                            class="_sku_input"
                                            :disabled="true"
                                            oninput="value=value.replace(/[^0-9.]/g,'')"
                                        />
                                        <el-input
                                            placeholder="库存"
                                            v-model="batchSpec.product_stock"
                                            size="medium"
                                            class="_sku_input"
                                            oninput="value=value.replace(/[^0-9.]/g,'')"
                                        />
                                        <el-input
                                            placeholder="重量"
                                            v-model="batchSpec.product_weight"
                                            size="medium"
                                            class="_sku_input"
                                            oninput="value=value.replace(/[^0-9.]/g,'')"
                                        />
                                        <el-input
                                            placeholder="成本价"
                                            v-model="batchSpec.cost_price"
                                            size="medium"
                                            class="_sku_input"
                                            oninput="value=value.replace(/[^0-9.]/g,'')"
                                        />
                                        <el-input
                                            placeholder="商家编码"
                                            v-model="batchSpec.product_sku"
                                            size="medium"
                                            class="_sku_input"
                                        />
                                        <el-input
                                            placeholder="条形码"
                                            v-model="batchSpec.product_barcode"
                                            size="medium"
                                            class="_sku_input"
                                        />
                                        <p class="_sku_batch_title2" @click="handleBatchSpec()">批量填充</p>
                                    </div>
                                    <div class="_sku_header">
                                        <p
                                            v-for="(option,index) in ['规格','学生价(元)','分佣金额','库存','重量','成本价(元)','商家编码','条形码','规格图片']"
                                            :key="index"
                                            class="_sku_header_item"
                                        >
                                            {{ option }}
                                        </p>
                                    </div>
                                    <div class="_sku_content">
                                        <template v-if="formData.goods_product_json.length">
                                            <div
                                                v-for="(row,index) in formData.goods_product_json"
                                                :key="index"
                                                class="_skus"
                                            >
                                                <!-- 规格展示 -->
                                                <div class="_skus_spec_wrap">
                                                    <div
                                                        v-for="(option,idx) in row.specs"
                                                        :key="idx"
                                                        class="_skus_spec"
                                                        :style="{marginTop: idx === 0 ? '0' : '8px'}"
                                                    >
                                                        <p class="_skus_spec_name">
                                                            {{ option.spec_name }}：
                                                        </p>
                                                        <p class="_skus_spec_value">
                                                            {{ option.spec_value }}
                                                        </p>
                                                    </div>
                                                </div>
                                                <!-- sku数据 -->
                                                <div class="_skus_input1">
                                                    <el-input
                                                        placeholder="学生价"
                                                        v-model="row.product_price"
                                                        size="medium"
                                                        @blur="handleComputedPrice()"
                                                        oninput="value=value.replace(/[^0-9.]/g,'')"
                                                    />
                                                </div>
                                                <div class="_skus_input2">
                                                    <el-input
                                                        placeholder="分佣金额"
                                                        v-model="row.product_commission"
                                                        size="medium"
                                                        :disabled="true"
                                                        oninput="value=value.replace(/[^0-9.]/g,'')"
                                                    />
                                                </div>
                                                <div class="_skus_input3">
                                                    <el-input
                                                        placeholder="库存"
                                                        v-model="row.product_stock"
                                                        size="medium"
                                                        @input="handleComputedStock()"
                                                        oninput="value=value.replace(/[^0-9.]/g,'')"
                                                    />
                                                </div>
                                                <div class="_skus_input4">
                                                    <el-input
                                                        placeholder="重量"
                                                        v-model="row.product_weight"
                                                        size="medium"
                                                        oninput="value=value.replace(/[^0-9.]/g,'')"
                                                    />
                                                </div>
                                                <div class="_skus_input5">
                                                    <el-input
                                                        placeholder="成本价"
                                                        v-model="row.cost_price"
                                                        size="medium"
                                                        @blur="handleComputedCostPrice()"
                                                        oninput="value=value.replace(/[^0-9.]/g,'')"
                                                    />
                                                </div>
                                                <div class="_skus_input6">
                                                    <el-input
                                                        placeholder="商家编码"
                                                        v-model="row.product_sku"
                                                        size="medium"
                                                    />
                                                </div>
                                                <div class="_skus_input7">
                                                    <el-input
                                                        placeholder="条形码"
                                                        v-model="row.product_barcode"
                                                        size="medium"
                                                    />
                                                </div>
                                                <!-- 图片商城 -->
                                                <div class="_sku_images">
                                                    <template v-if="!row.product_image">
                                                        <el-upload
                                                            class="_skus_upload"
                                                            action="upload"
                                                            accept="image/*"
                                                            list-type="picture-card"
                                                            :show-file-list="false"
                                                            :http-request="(e) => {fnUploadImage(e, row, 'product_image')}"
                                                            style="width: 84px;height: 36px;border: none"
                                                        >
                                                            <p class="_skus_upload_button">
                                                                上传图片
                                                            </p>
                                                        </el-upload>
                                                    </template>
                                                    <template v-else>
                                                        <div class="_skus_price">
                                                            <img
                                                                :src="row.product_image" class="_skus_product_iamge"
                                                                @mouseenter="handleMouseEnter(row)"
                                                            >
                                                            <div
                                                                class="_skus_sel" v-if="!!row.flag"
                                                                @mouseleave="handleMouseEnter(row)"
                                                            >
                                                                <i class="el-icon-zoom-in" @click="fnPrievimage(row.product_image)"></i>
                                                                <i class="el-icon-delete" @click="row.product_image = ''"></i>
                                                            </div>
                                                        </div>
                                                    </template>
                                                </div>
                                            </div>
                                        </template>
                                        <template v-if="!formData.goods_product_json.length">
                                            <p class="_sku_no_data">
                                                暂无数据
                                            </p>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="成本价："
                            prop="goods_cost_price"
                        >
                            <el-input
                                placeholder="选填"
                                v-model="formData.goods_cost_price"
                                size="small"
                                type="number"
                                class="good-input"
                                :style="{width: '300px'}"
                                :disabled="true"
                            />
                        </el-form-item>
                        <el-form-item
                            label="学生价："
                            prop="goods_price"
                        >
                            <el-input
                                placeholder="售卖价格"
                                v-model="formData.goods_price"
                                size="small"
                                type="number"
                                :style="{width: '300px'}"
                                :disabled="true"
                            />
                            <span style="display:inline-block;color:#999;margin-left:12px">*商城售卖价格</span>
                        </el-form-item>
                        <el-form-item
                            label="商品原价："
                            prop="goods_price_origin"
                        >
                            <el-input
                                placeholder="商品原价应大于学生价"
                                v-model="formData.goods_price_origin"
                                size="small"
                                type="number"
                                :style="{width: '300px'}"
                            />
                            <span style="display:inline-block;color:#999;margin-left:12px">*指该商品的原价，最好与淘宝上的价位保持一致</span>
                        </el-form-item>
                        <el-form-item
                            label="总库存："
                            prop="goods_stock"
                        >
                            <el-input
                                placeholder="请填写商品库存"
                                v-model="formData.goods_stock"
                                size="small"
                                type="number"
                                :style="{width: '300px'}"
                                :disabled="true"
                            />
                        </el-form-item>
                        <el-form-item
                            label="限购数量："
                            prop="buy_limit_count"
                        >
                            <el-input
                                placeholder="请填写限购数量"
                                v-model="formData.buy_limit_count"
                                size="small"
                                type="number"
                                :style="{width: '300px'}"
                            />
                            <span style="display:inline-block;color:#999;margin-left:12px">*-1意味着不限制限购数量</span>
                        </el-form-item>
                        <el-form-item
                            size="small"
                            label="运费设置："
                        >
                            <el-radio-group
                                v-model="hasFreight"
                                @change="handleChangeFeightType"
                            >
                                <el-radio :label="0">
                                    包邮
                                </el-radio>
                                <el-radio :label="1">
                                    不包邮
                                </el-radio>
                            </el-radio-group>
                            <br>
                            <div
                                class="wrap-hasFreight"
                                v-if="hasFreight"
                            >
                                <el-radio-group
                                    v-model="free.free_type"
                                >
                                    <div class="wrap-hasFreight-list">
                                        <el-radio :label="0">
                                            运费模版
                                        </el-radio>
                                        <el-select
                                            v-model="free.free_mod"
                                            clearable
                                            filterable
                                            placeholder="请选择"
                                            size="small"
                                            style="width:300px;margin-right:10px"
                                            @change="handleChangeTempNo(free.free_mod)"
                                        >
                                            <el-option
                                                v-for="item in freeList"
                                                :key="item.template_no"
                                                :label="item.template_name"
                                                :value="item.template_no"
                                            />
                                        </el-select>
                                        <!-- 选择按重量计费展示 -->
                                        <el-input
                                            v-if="free.freight_type == 'weight'"
                                            v-model="free.free_kilog"
                                            placeholder="请输入内容"
                                            size="small"
                                            maxlength="10"
                                            type="number"
                                            style="width:300px;margin-right:10px"
                                        />
                                        <p
                                            v-if="free.freight_type == 'weight'"
                                            class="wrap-hasFreight-list-kg"
                                        >
                                            kg
                                        </p>
                                        <p
                                            v-if="free.freight_type == 'weight'"
                                            class="wrap-hasFreight-list-desc"
                                        >
                                            当前运费模板，按物流重量(含包装)计价
                                        </p>
                                    </div>
                                    <div class="wrap-hasFreight-list">
                                        <el-radio :label="1">
                                            统一运费
                                        </el-radio>
                                        <el-input
                                            v-model="free.free_money"
                                            placeholder="请输入运费"
                                            size="small"
                                            maxlength="10"
                                            type="number"
                                            style="width:300px;"
                                        />
                                        <p
                                            class="wrap-hasFreight-list-kg"
                                            style="left:-25px"
                                        >
                                            元
                                        </p>
                                    </div>
                                </el-radio-group>
                            </div>
                        </el-form-item>
                        <el-form-item
                            size="small"
                            prop="goods_service"
                            label="服务内容:"
                        >
                            <el-autocomplete
                                v-for="(sitem, sindex) in serviceList"
                                :key="sindex"
                                :disabled="sindex == 0"
                                v-model="sitem.value"
                                :fetch-suggestions="querySearch"
                                placeholder="最多4字"
                                size="small"
                                clearable
                                :maxlength="4"
                                @blur="fnInitServiceRecomment(sitem.value)"
                                :style="{width: '120px', marginRight: '10px'}"
                            />
                            <el-tooltip
                                content="Bottom center"
                                placement="top"
                                effect="light"
                                popper-class="service-tip-pop"
                                :hide-after="2000"
                            >
                                <i class="iconfont icon-jieshi icon-commission" style="color:rgba(153, 153, 153, 1);cursor:pointer"/>
                                <img
                                    src="http://cdn.wxhand.com/wei/images/hire/manage/market/service-tip.png"
                                    alt="提示"
                                    slot="content"
                                >
                            </el-tooltip>
                            <span style="display:inline-block;color:rgba(153, 153, 153, 1);margin-left:3px">*指商品的服务内容，如：正品保障,支持退货......</span>
                        </el-form-item>
                    </div>
                </template>

                <!-- 图文描述 -->
                <template>
                    <div class="_tabs_view"></div>
                    <div id="third">图文描述</div>
                    <div class="third_form">
                        <el-form-item
                            size="small"
                            prop="goods_cover"
                            label="缩略图："
                        >
                            <div :style="{display: 'flex'}">
                                <el-upload
                                    class="_third_upload"
                                    action="upload"
                                    accept="image/*"
                                    list-type="picture-card"
                                    :show-file-list="false"
                                    :http-request="(e) => {fnUploadImage(e, formData, 'goods_cover')}"
                                >
                                    <template v-if="!formData.goods_cover">
                                        <div class="_third_upload_wrap">
                                            <i class="iconfont icon-shangchuan"></i>
                                            <p class="_third_text">点击上传</p>
                                        </div>
                                    </template>
                                    <template v-if="formData.goods_cover">
                                        <img :src="formData.goods_cover" class="_third_cover">
                                    </template>
                                </el-upload>
                                <span :style="{color: 'rgba(51, 51, 51, 1)', fontSize: '14px', marginTop: '65px', marginLeft: '10px'}">*建议图片大小:800px*800px</span>
                            </div>
                        </el-form-item>
                        <el-form-item
                            size="small"
                            prop="goods_image_json"
                            label="轮播图："
                        >
                            <p :style="{color: 'rgba(51, 51, 51, 1)', fontSize: '14px'}">*建议图片比例为1:1、800px*800px以上图片大小,拖动图片可更换图片位置</p>
                            <div :style="{display: 'flex', marginTop: '15px'}">
                                <div :style="{display: 'flex'}">
                                    <draggable
                                        v-model="formData.goods_image_json"
                                    >
                                        <div
                                            :style="{width: '90px',height: '90px',position: 'relative', marginRight: '15px', display: 'inline-block'}"
                                            v-for="(row,index) in formData.goods_image_json"
                                            :key="index"
                                        >
                                            <p v-if="index === 0" :style="{position: 'absolute', left: '0', top: '0', width: '90px', height: '18px', lineHeight: '18px', textAlign: 'center', color: '#fff', fontSize: '12px', background: 'rgba(0, 0, 0, .6)'}">宝贝主图</p>
                                            <img
                                                :src="row"
                                                :style="{width: '90px', height: '90px'}"
                                            >
                                        </div>
                                    </draggable>
                                </div>
                                <el-upload
                                    v-if="formData.goods_image_json.length < 5"
                                    class="_third_upload"
                                    action="upload"
                                    accept="image/*"
                                    :limit="5"
                                    multiple
                                    list-type="picture-card"
                                    :show-file-list="false"
                                    :http-request="(e) => {fnUploadImage(e, formData, 'goods_image_json')}"
                                    :on-exceed="handleExceed"
                                >
                                    <div class="_third_upload_wrap">
                                        <i class="iconfont icon-shangchuan"></i>
                                        <p class="_third_text">点击上传</p>
                                    </div>
                                </el-upload>
                            </div>
                        </el-form-item>
                        <el-form-item
                            size="small"
                            prop="goods_content"
                            label="图文详情："
                        >
                            <div :style="{width: '100%'}">
                                <ueditor
                                    v-if="initUeditor"
                                    ref="ueditor"
                                    :default-value="formData.goods_content"
                                />
                            </div>
                        </el-form-item>
                    </div>
                </template>
            </el-form>

            <!-- 操作按钮 -->
            <div class="_foot">
                <p class="_foot_bg"></p>
                <div class="_foot_wrap">
                    <p class="_cancel" @click="handleCancelForm()">
                        取消
                    </p>
                    <p class="_save" @click="handleSaveForm('ruleForm')">
                        保存
                    </p>
                </div>
            </div>
        </div>

        <!-- 佣金超额提示弹窗 -->
        <div
            v-if="dialogCommision"
            class="dialogCommision"
        >
            <div class="dialogCommision-wrap">
                <i
                    class="el-icon-close"
                    @click="dialogCommision = false"
                />
                <p class="dialogCommision-wrap-title">
                    提示
                </p>
                <p class="dialogCommision-wrap-text">
                    当您在商城财务中开通了支付宝或微信可冻结的账户，则买家的支付金额在结算给您时，会自动扣除此处设置的佣金比例金额。因支付宝/微信官方的限制，此处佣金比例最多只可设置为30%，超出部分则不可扣除。当前您设置的佣金比例大于30%，所以，掌上大学会以超30%的佣金为基数来返还佣金给代理，但掌大真实得到的佣金则因支付官方的限制，只能拿到30%，所以，需要您进入【商城财务-新商城财务-账单详情】中，每月人工支付本月未结算给掌上大学的佣金金额。且此笔金额需要您在每月10号前进行结算，逾期并超出3个工作日，掌上大学有权采取追究措施
                </p>
                <el-button
                    size="small"
                    type="primary"
                    style="width:180px;height:32px;margin:24px 0 32px 0"
                    @click="dialogCommision = false"
                >
                    知道了
                </el-button>
            </div>
        </div>

        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import { mapState } from 'vuex';
import imgPreview from '@/components/common/img-preview';
import draggable from 'vuedraggable';
import ueditor from '@/components/common/ueditor.vue';
import fetchJSonp from 'fetch-jsonp';
export default {
    components: {
        imgPreview,
        draggable,
        ueditor
    },
    mixins: [],
    data() {
        const goodTypeValidator = (rule, value, callback) => {
            if (!value || value.length < 2) {
                callback(new Error('请选择商品类型'));
            } else {
                callback();
            }
        };

        const validateShelfTime = (rule, value, callback) => {
            if (value <= 0) {
                callback(new Error('请选择上架时间'));
            } else {
                callback();
            }
        };

        const validateExpire = (rule, value, callback) => {
            if (!value || value == 0) {
                callback();
            } else {
                if(value < this.formData.shelf_time){
                    callback(new Error('结束时间不得晚于上架时间'));
                    return ;
                }
                callback();
            }
        };

        const validateRate = (rule, value, callback) => {
            if(this.commission_tax_status == 0) {
                if(Number(value) < 0) {
                    callback(new Error('佣金比例不可小于0%'));
                } else if(Number(value) == 0){
                    callback(new Error('佣金比例不可为0%'));
                } else if (Number(value) > 100) {
                    this.dialogCommision = true;
                    callback(new Error('佣金比例不可超出100%'));
                } else {
                    callback();
                }
            } else if (this.commission_tax_status == 1) {
                if(Number(value) < 0) {
                    callback(new Error('佣金比例不可小于0%'));
                } else if(Number(value) == 0){
                    callback(new Error('佣金比例不可为0%'));
                } else if (Number(value) > 94) {
                    this.dialogCommision = true;
                    callback(new Error('佣金比例不可超出94%'));
                } else {
                    callback();
                }
            }
        };

        const validateSpec = (rule, value, callback) => {
            callback();
        };

        const validatePriceOrign = (rule, value, callback) => {
            if(value === '') {
                callback(new Error('商品原价不可以为空'));
            }
            if(Number(value) > Number(this.formData.goods_price)) {
                callback();
            }

            if(Number(value) <= Number(this.formData.goods_price)) {
                callback(new Error('商品原价应大于学生价'));
            }
        };


        return {
            goods_no: '',// 商品编号
            activeName: 'first',//当前tab
            batchSpec: { //批量填充数据
                product_price: "",
                product_commission: "",
                product_stock: "",
                product_weight: "",
                cost_price: "",
                product_sku: "",
                product_barcode: "",
                product_image: ""
            },
            formData: {
                goods_type: 1,//商品类型, 1:普通商品, 8:虚拟商品
                is_cross_border: 0,//是否为跨境商品, 1:是, 0:否
                is_second_hand: 0,//是否二手商品 1:是 0:否
                goods_title: '',//商品名称
                goodType: [],//商品分类 *追加参数
                production_time: '',//生产时间 *仅二手商品生效
                quality_guarantee_period: '',//保质期 *仅二手商品生效
                almost_new: '',//几成新 *仅二手商品生效
                type_no: '',//分类编号
                goods_sort: '',//商品排序，正序，默认99
                shelf_time: '',//上架时间
                expire_time: '',//过期时间, 0:不过期
                goods_number: '',//商品货号
                agent_cate_no: '',//商品代理类目编号
                goods_price: '',//商品价格
                goods_price_origin: '',//商品原价
                goods_stock: '',//商品总库存 *新增参数
                goods_cost_price: '',//商品成本价
                goods_commission_rate: '',//佣金比例
                // tuan_num: '',//拼团人数
                // tuan_price: '',//拼团价
                // tuan_auto_success: '',//自动拼团，1：开启，0：关闭
                freight_type: '',//计费方式，weight：按重量计费，num：按件计费，fix：固定邮费
                freight_template_no: '',//邮费模板编号
                goods_freight: '',//商品运费
                goods_weight: '',//商品重量
                goods_tag: '',//服务内容
                goods_cover: 'http://pic.wxhand.com/dev/wei_image/1caf28e2026b8a98835b9c0039dcf57d.png',//商品封面
                goods_image_json: [
                    'http://pic.wxhand.com/dev/wei_image/1caf28e2026b8a98835b9c0039dcf57d.png',
                    'http://pic.wxhand.com/dev/wei_image/7fc8739283fbbc233046ae79936d1fd4.jpg',
                    'http://pic.wxhand.com/dev/wei_image/1caf28e2026b8a98835b9c0039dcf57d.png',
                    'http://pic.wxhand.com/dev/wei_image/1caf28e2026b8a98835b9c0039dcf57d.png'
                ],//商品轮播图
                goods_content: '<p><img src="//img.alicdn.com/imgextra/i4/3052256488/O1CN01k1xciL1xnYH9btZBD_!!3052256488.png"/>',//商品详情内容
                goods_spec_json: [],//商品规格JSON
                goods_product_json: [
                    // {
                    //     cost_price: "8.88",
                    //     product_barcode: "",
                    //     product_commission: "",
                    //     product_image: "",
                    //     product_price: "",
                    //     product_sku: "",
                    //     product_stock: "",
                    //     product_weight: "",
                    //     specs: [{
                    //         spec_name: "颜色",
                    //         spec_value: "红色"
                    //     },{
                    //         spec_name: "尺码",
                    //         spec_value: "S"
                    //     }]
                    // }
                ],//商品产品JSON
                // reduction_info: '',//商品满减JSON
                // wholesale_info: '',//商品批发JSON
                buy_limit_count: -1,//限制购买次数, -1:不限制
                virtual_buy_info_type: 0,//虚拟商品收货信息类别, 0:无, 1:其他, 2:QQ, 4:邮箱
                virtual_buy_info_other: ''//虚拟商品收货其他信息名称
            },
            rules: {
                goods_title: [
                    { required: true, message: '请输入商品名称,不可以为空', trigger: 'blur' }
                ],
                goodType: [
                    { required: true, message: '请选择商品类型', trigger: 'blur' },
                    { validator: goodTypeValidator, trigger: 'blur' }
                ],
                goods_sort: [
                    { required: true, message: '请输入商品排序,不可以为空', trigger: 'change' }
                ],
                shelf_time: [
                    { required: true, message: '请选择上架时间', trigger: 'blur' },
                    { validator: validateShelfTime, trigger: 'blur' }
                ],
                expire_time: [
                    { validator: validateExpire, trigger: 'blur' }
                ],
                production_time: [
                    { required: true, message: '请选择生产时间,不可以为空', trigger: 'change' }
                ],
                goods_commission_rate: [
                    { validator: validateRate, type: 'number', trigger: 'blur' },
                    { required: true, message: '请输入佣金比例', trigger: 'blur' },
                ],
                goods_spec_json: [
                    { validator: validateSpec, trigger: 'blur' }
                ],
                goods_price_origin: [
                    { validator: validatePriceOrign, trigger: 'change' }
                ]
            },
            types: [],//商品分类数据
            cateList: [],//类目列表
            dialogCommision: false,//佣金超额提示弹窗
            // 规格相关参数 注意回填数据格式
            specList: [
                // {
                //     spec_name: '颜色',
                //     values: [
                //         {spec_value: '红色'}
                //     ]
                // }
            ],
            // 运费相关参数
            hasFreight: 0,
            freeList: [],
            free: {
                free_old_type: 0,
                free_type: 0,
                free_mod: '',
                free_kilog: '',
                free_money: '',
                template_no: '',
                freight_type: ''
            },
            // 服务内容相关
            serviceList: [
                {value: '包邮'},
                {value: ''},
                {value: ''},
                {value: ''},
                {value: ''},
            ],
            serviceRecomend: [],
            //图文详情
            initUeditor: false
        };
    },
    filters: {
    },
    computed: {
        // 是否是编辑状态
        isEdit () {
            return this.goods_no ? true : false;
        },
        ...mapState({
            commission_tax_status: state => state.common.commission_tax_status
        })
    },
    watch: {
        // 监听佣金比例修改 自动同步sku分佣金额
        "formData.goods_commission_rate": {
            handler: function (value) {
                if(!this.formData.goods_product_json.length) return false;
                for(let i in this.formData.goods_product_json) {
                    const product_price = this.formData.goods_product_json[i].product_price ? Number(this.formData.goods_product_json[i].product_price) : 0;

                    this.$set(this.formData.goods_product_json[i], 'product_commission', Number(product_price * Number(value) / 100).toFixed(2));
                }
            },
            deep: true
        },
        // 监听sku价格修改 自动同步分佣金额
        "formData.goods_product_json": {
            handler: function (value) {
                for(let i in value) {
                    const goods_commission_rate = this.formData.goods_commission_rate ? Number(this.formData.goods_commission_rate) : 0;

                    this.$set(value[i], 'product_commission', Number(value[i].product_price * goods_commission_rate / 100));
                }
            },
            deep: true
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面
         */
        init () {
            this.goods_no = this.$route.query.no ? this.$route.query.no : '';
            this.$store.commit('header/SET_HEADER',[{ title: '校园商城' }, { title: '商品列表' }, { title: '新增/编辑商品' }]);
            this.initUeditor = true;
            this.getTypes();
            this.getCateList();
            this.getFeightList();
            this.fnInitServiceRecomment();

            // 编辑商品流程
            if(this.goods_no) {
                this.getInfo();
            }

            // 导入第三方淘客商品信息
            if(this.$route.query.shop_url) {
                this.getTkInfo(this.$route.query.shop_url);
            }
        },

        /**
         * @description 获取淘客商品信息
         */
        getTkInfo (url) {
            this.$post('',{
                content: decodeURIComponent(url)
            }).then(resp => {
                if(resp.code == 1) {
                    this.$set(this.formData, 'goods_title', resp.data.goods_title);
                    this.$set(this.formData, 'goods_cover', resp.data.goods_cover);
                    this.$set(this.formData, 'goods_image_json', resp.data.goods_image_list);
                    this.$set(this.formData, 'goods_price', resp.data.goods_price);
                    this.$set(this.formData, 'goods_price_origin', resp.data.goods_price_origin);
                    this.$nextTick(() => {
                        this.$refs.ueditor.setContent(resp.data.goods_content);
                    });
                    if(!resp.data.goods_content) {
                        this.getSpec(resp);
                    }
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 调用mtop接口查询描述和规格
         */
        getSpec (resp) {
            let item_id = resp.data.item_id;
            let url = `https://acs.m.taobao.com/h5/mtop.taobao.detail.getdesc/6.0/?data=%7B%22id%22%3A%22${item_id}%22%7D`;

            // 规格过滤 筛选出尺码和颜色即可
            const filterSpec = list => {
                let specList = [];
                for(let i in list){
                    if(list[i].name == '尺码' || list[i].name == '颜色分类') {
                        const spec_name = list[i].name;
                        const spec_value = list[i].value.split(',').reduce((cur,next) => {
                            cur.push({
                                spec_value: next
                            });
                            return cur;
                        },[]);

                        specList.push({
                            spec_name: spec_name,
                            values: spec_value
                        });
                    }
                }

                return specList;
            };

            if(resp.data.item_source == 'tao') {
                fetchJSonp(url).then(res=>{
                    return res.json();
                }).then(row => {
                    this.$nextTick(() => {
                        if(this.$refs.ueditor && row.data.pcDescContent.length){
                            this.$refs.ueditor.setContent(row.data.pcDescContent);
                        }
                        if(row.data.itemProperties.length) {
                            this.specList = filterSpec(row.data.itemProperties);
                        }
                    });
                });
            }
        },

        /**
         * @description 点击tab
         */
        handleClick () {
            const box = document.querySelector('._ruleForm_wrap');
            const topList = [
                document.getElementById('first').getClientRects()[0].top - 136,
                document.getElementById('second').getClientRects()[0].top - 136,
                document.getElementById('third').getClientRects()[0].top - 136
            ][{first: 0,second: 1,third: 2}[this.activeName]];

            box.scrollBy(0, topList);

        },

        /**
         * @description 获取商品分类数据
         */
        getTypes () {
            this.$post('', {}, resp => {
                if (resp.code == 1) {
                    this.types = resp.data.list;
                }
            });
        },

        /**
         * @description 获取商品类目列表
         */
        getCateList () {
            this.$post('', {}, resp => {
                if (resp.code == 1) {
                    this.cateList = resp.data.list;
                }
            });
        },

        /**
         * @description 获取运费模版数据列表
         */
        getFeightList () {
            this.$post('', {}, resp => {
                if (resp.code == 1) {
                    this.freeList = resp.data.list;
                }
            });
        },

        /**
         * @description 添加商品主规格
         */
        handleAddSpec () {
            this.specList = this.specList.concat([{
                spec_name: '',
                values: [{
                    spec_value: ''
                }]
            }]);

            console.log('specList', this.specList);
        },

        /**
         * @description 获取商品数据
         */
        getInfo () {
            this.$post('', {}, resp => {
                if (resp.code == 1) {
                    //
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },


        /**
         * @description 保存数据
         */
        handleSaveForm (formName) {
            // 其他相关校验
            const validForm = () => {
                if(!this.formData.goods_spec_json.length || !this.formData.goods_product_json.length) {
                    this.$notify({
                        type: 'success',
                        title: '提示',
                        duration: 2000,
                        message: '商品规格不可以为空'
                    });
                    return false;
                }

                if(this.formData.goods_price_origin <= this.formData.goods_price) {
                    this.$notify({
                        type: 'success',
                        title: '提示',
                        duration: 2000,
                        message: '商品原价应大于学生价'
                    });
                    return false;
                }
            };

            // 处理新增或编辑数据
            if(validForm()) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const data = {
                            goods_no: this.isEdit ? this.goods_no : '',
                            //
                        };

                        console.log('data', this.formData);

                        this.$post('', {
                            ...data
                        }, resp => {
                            if (resp.code == 1) {
                                const message = this.isEdit ? '编辑成功' : '新增成功';

                                this.$notify({
                                    type: 'success',
                                    title: '提示',
                                    duration: 2000,
                                    message: message
                                });

                                setTimeout(() => {
                                    this.$router.push({
                                        name: 'goodList'
                                    });
                                },500);
                            } else {
                                this.$notify({
                                    title: '警告',
                                    message: resp.msg,
                                    duration: 2000,
                                    type: 'warning'
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            }
        },

        /**
         * @description 取消编辑
         */
        handleCancelForm () {
            this.$confirm('取消后修改的数据将不会进行保存,是否取消', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$router.push({
                    name: 'goodList'
                });
            });
        },

        /**
         * @description 添加子规格
         */
        handleAddValues (row, idx) {
            this.$set(row.values, idx + 1, { spec_value: '' });
        },

        /**
         * @description 删除规格
         *      specList: 全部规格数据
         *      row: 单个规格数据
         *      idx: 子规格索引
         *      index: 主规格索引
         */
        handleRemoveSpec (row, idx, index) {
            const values = JSON.parse(JSON.stringify(row.values));

            if(row.values.length === 1) { //删除主规格
                this.specList.splice(index, 1);
            }

            if(row.values.length > 1) { //删除子规格
                values.splice(idx,1);
                this.$set(row, 'values', values);
            }
        },

        /**
         * @description 确认添加规格值
         */
        handleConfirmSpec () {
            // 校验规格值
            const validSpec = () => {
                const specList = this.specList;

                for(let key=0; key<specList.length; key++) {
                    let values = specList[key]['values'];
                    if(!specList[key]['spec_name']) return false;
                    for(let j=0; j<values.length;j++) {
                        if(!values[j]['spec_value']) return false;
                    }
                }
                return true;
            };

            // 规格值生成 -> 正向处理
            const handleSpec = list => {
                let specs = [];

                for(let i in list) {
                    for(let j in list[i].values) {
                        specs.push({
                            spec_name: list[i].spec_name,
                            spec_value: list[i].values[j].spec_value
                        });
                    }
                }

                return specs;
            };

            // 规格数据处理 排列组合
            const filterSpec = list => {
                let specs = [];

                for (let i in list) {
                    let tmp = [];
                    for (let j in list[i].values) {
                        if (specs.length <= 0) {
                            tmp.push([{ spec_name: list[i].spec_name, spec_value: list[i].values[j].spec_value }]);
                        } else {
                            for (var k in specs) {
                                tmp.push(specs[k].concat({ spec_name: list[i].spec_name, spec_value: list[i].values[j].spec_value }));
                            }
                        }
                    }
                    specs = tmp;
                }
                return specs;
            };

            // 根据组合结果生成SKU数据
            const handleSku = list => {
                let goods_product_json = [];

                // 根据规格生成全新的sku数据
                for(let i in list) {
                    goods_product_json.push({
                        product_price: '',//产品价格
                        product_commission: '',//产品佣金
                        product_stock: '',//产品库存
                        product_weight: '',//产品重量
                        cost_price: '',//产品成本价格
                        product_sku: '',//产品编码
                        product_barcode: '',//产品条形码
                        product_image: 'http://pic.wxhand.com/dev/wei_image/1caf28e2026b8a98835b9c0039dcf57d.png',//产品图片
                        specs: list[i],//产品规格
                    });
                }

                //存在规格值进行比对生成,无需清空
                if(this.formData.goods_product_json.length) {
                    const SpecList = JSON.parse(JSON.stringify(this.formData.goods_product_json));

                    for(let i in SpecList) {
                        const KEY = JSON.stringify(SpecList[i].specs);

                        for(let j=0; j<goods_product_json.length; j++) {
                            const NEW_KEY = JSON.stringify(goods_product_json[j].specs);

                            if(NEW_KEY === KEY) {
                                goods_product_json[j].product_price = SpecList[i].product_price;//产品价格
                                goods_product_json[j].product_commission = SpecList[i].product_commission;//产品佣金
                                goods_product_json[j].product_stock = SpecList[i].product_stock;//产品库存
                                goods_product_json[j].product_weight = SpecList[i].product_weight;//产品重量
                                goods_product_json[j].cost_price = SpecList[i].cost_price;//产品成本价格
                                goods_product_json[j].product_sku = SpecList[i].product_sku;//产品编码
                                goods_product_json[j].product_barcode = SpecList[i].product_barcode;//产品条形码
                                goods_product_json[j].product_image = SpecList[i].product_image;//产品图片
                                goods_product_json[j].specs = SpecList[i].specs;//产品规格
                            }
                        }
                    }
                } else {
                    // 清空之前计算好的学生价，成本价，库存
                    this.$set(this.formData, 'goods_price', '');
                    this.$set(this.formData, 'goods_cost_price', '');
                    this.$set(this.formData, 'goods_stock', '');
                }

                return goods_product_json;
            };

            if(validSpec()) {
                this.$set(this.formData, 'goods_spec_json', handleSpec(this.specList));//设置规格数据
                this.$set(this.formData, 'goods_product_json', handleSku(filterSpec(this.specList)));//设置规格数据
                console.log('goods_spec_json', this.formData.goods_spec_json);//设置规格数据
                console.log('goods_product_json', this.formData.goods_product_json);//设置Sku数据

                this.$notify({
                    type: 'success',
                    title: '提示',
                    duration: 2000,
                    message: '添加成功'
                });
            } else {
                this.$notify({
                    title: '警告',
                    message: '规格名或者规格值不可以为空',
                    duration: 2000,
                    type: 'warning'
                });
            }
        },

        /**
         * @description 根据sku数据,填充学生价
         */
        handleComputedPrice () {
            const goods_product_json = JSON.parse(JSON.stringify(this.formData.goods_product_json));
            const product_price = goods_product_json.sort((a, b) => {
                const now_price = Number(a.product_price) ? Number(a.product_price) : 0;
                const next_price = Number(b.product_price) ? Number(b.product_price) : 0;
                return now_price - next_price;
            })[0].product_price;

            this.$set(this.formData, 'goods_price', Number(product_price).toFixed(2));
        },

        /**
         * @description 根据sku数据,填充成本价
         */
        handleComputedCostPrice () {
            const goods_product_json = JSON.parse(JSON.stringify(this.formData.goods_product_json));
            const cost_price = goods_product_json.sort((a, b) => {
                const now_price = Number(a.cost_price) ? Number(a.cost_price) : 0;
                const next_price = Number(b.cost_price) ? Number(b.cost_price) : 0;
                return now_price - next_price;
            })[0].cost_price;

            this.$set(this.formData, 'goods_cost_price', Number(cost_price).toFixed(2));
        },

        /**
         * @description 根据sku数据,填充库存
         */
        handleComputedStock () {
            const goods_product_json = JSON.parse(JSON.stringify(this.formData.goods_product_json));
            const goods_stock = goods_product_json.reduce((totle,cur)=>{
                return Number(totle) + Number(cur.product_stock);
            },[]);

            this.$set(this.formData, 'goods_stock', goods_stock);
        },

        /**
         * @description 批量填充sku数据
         */
        handleBatchSpec () {
            if(!this.formData.goods_product_json.length) {
                this.$notify({
                    title: '警告',
                    message: '请先添加商品规格,不可以为空',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            const goods_commission_rate = this.formData.goods_commission_rate ? Number(this.formData.goods_commission_rate) : 0;
            const goods_product_json = this.formData.goods_product_json;
            for(let i in goods_product_json) {
                goods_product_json[i].product_price = this.batchSpec.product_price ? this.batchSpec.product_price : goods_product_json[i].product_price;
                goods_product_json[i].product_commission = this.batchSpec.product_price ? Number(this.batchSpec.product_price * goods_commission_rate / 100).toFixed(2) : goods_product_json[i].product_commission;
                goods_product_json[i].product_stock = this.batchSpec.product_stock ? this.batchSpec.product_stock : goods_product_json[i].product_stock;
                goods_product_json[i].product_weight = this.batchSpec.product_weight ? this.batchSpec.product_weight : goods_product_json[i].product_weight;
                goods_product_json[i].cost_price = this.batchSpec.cost_price ? this.batchSpec.cost_price : goods_product_json[i].cost_price;
                goods_product_json[i].product_sku = this.batchSpec.product_sku ? this.batchSpec.product_sku : goods_product_json[i].product_sku;
                goods_product_json[i].product_barcode = this.batchSpec.product_barcode ? this.batchSpec.product_barcode : goods_product_json[i].product_barcode;
            }

            this.batchSpec = {
                product_price: '',
                product_commission: '',
                product_stock: '',
                product_weight: '',
                cost_price: '',
                product_sku: '',
                product_barcode:''
            };

            this.handleComputedPrice();
            this.handleComputedCostPrice();
            this.handleComputedStock();
        },

        /**
         * @description 上传商品规格图
         */
        fnUploadImage(e, row, param) {
            let pic = new FormData();

            pic.append('image', e.file);

            this.$upload({
                url: '/EcommerceAlipay/uploadPicture',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        if(param == 'goods_image_json') {
                            let list = JSON.parse(JSON.stringify(this.formData.goods_image_json));

                            list.push(resp.data.url);
                            this.$set(row, param, list);
                        } else {
                            this.$set(row, param, resp.data.url);
                        }
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            cneter: true
                        });
                    }
                }
            });
        },

        /**
         * @description 文件上传限制钩子
         */
        handleExceed (file, fileList) {
            this.$notify({
                title: '提示',
                message: '最多只可以上传5张图片',
                type: 'warning',
                duration: 2000
            });
        },

        /**
         * @description 鼠标移入移出商品规格图
         */
        handleMouseEnter (row) {
            if(!row.flag) {
                this.$set(row, 'flag', true);
            } else {
                this.$set(row, 'flag', false);
            }
        },

        /**
         * @description: 预览图片
         */
        fnPrievimage (images, index) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$notify({
                    title: '提示',
                    message: '图片类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        },

        /**
         * @description 切换运费类型
         */
        handleChangeFeightType(val){
            if(val == 0){
                this.$set(this.serviceList, 0, {value: '包邮'});
                this.free.free_type = -1;
            }else{
                this.$set(this.serviceList, 0, {value: '邮费'});
                this.free.free_type = this.free.free_old_type;
            }
        },

        /**
         * @description 获取选择模版编号
         */
        handleChangeTempNo (no) {
            this.freeList.forEach(element => {
                if(element.template_no == no) {
                    this.$set(this.free, 'template_no', element.template_no);
                    this.$set(this.free, 'freight_type', element.freight_type);
                }
            });
        },

        /**
         * @description 初始化服务内容
         */
        fnInitServiceRecomment(str){
            if(str){
                for(var i in this.serviceRecomend){
                    if(this.serviceRecomend[i].value == str){
                        return ;
                    }
                }
                this.serviceRecomend.unshift({value: str});
                if(this.serviceRecomend.length > 10){
                    this.serviceRecomend = this.serviceRecomend.slice(0,11);
                }
                localStorage.setItem('goodEditServiceRecomment', JSON.stringify(this.serviceRecomend));
            }else{
                let recomments = localStorage.getItem('goodEditServiceRecomment');

                if(recomments){
                    this.serviceRecomend = JSON.parse(recomments);
                }
            }
        },

        /**
         * @description 服务内容提示
         */
        querySearch(queryString, cb) {
            var restaurants = this.serviceRecomend;
            var results = queryString ? restaurants.filter(item => {
                if(item.value && item.value.indexOf(queryString) > -1){
                    return true;
                }else{
                    return false;
                }
            }) : restaurants;
            cb(results);
        },
    }
};
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    ._tabs {
        box-sizing: border-box;
        padding: 0 24px;
    }
    ._tabs_view {
        width: 100%;
        height: 13px;
        background-color: rgba(240, 242, 247, 1);
    }
    ._ruleForm_wrap {
        flex: 1;
        overflow: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
        }
        ._ruleForm {
            box-sizing: border-box;
            #first {
                height: 66px;
                line-height: 66px;
                box-sizing: border-box;
                padding-left: 24px;
                color: rgba(63, 69, 75, 1);
                font-size: 16px;
                font-weight: 500;
                border-bottom: 1px rgba(211, 220, 230, 1) solid;
            }
            .first_form, .second_form, .third_form {
                display: flex;
                flex-direction: column;
                margin: 8px 80px;
                box-sizing: border-box;
            }
            #second {
                height: 66px;
                line-height: 66px;
                box-sizing: border-box;
                padding-left: 24px;
                color: rgba(63, 69, 75, 1);
                font-size: 16px;
                font-weight: 500;
                border-bottom: 1px rgba(211, 220, 230, 1) solid;
            }
            #third {
                height: 66px;
                line-height: 66px;
                box-sizing: border-box;
                padding-left: 24px;
                color: rgba(63, 69, 75, 1);
                font-size: 16px;
                font-weight: 500;
                border-bottom: 1px rgba(211, 220, 230, 1) solid;
            }
            ._spec_set {
                width: 100%;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                background-color: #F8F8F8;
                border: 1px rgba(238, 238, 238, 1) solid;
                border-radius: 4px;
                ._spec_title {
                    height: 56px;
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    padding-left: 24px;
                    font-weight: 500;
                    font-size: 16px;
                    border-bottom: 1px rgba(238, 238, 238, 1) solid;
                    margin-bottom: 24px;
                    ._spec_desc {
                        color: rgba(153, 153, 153, 1);
                        font-size: 14px;
                        margin-left: 8px;
                    }
                }
                ._spec_wrap {
                    width: calc(100% - 48px);
                    margin-left: 24px;
                    padding-bottom: 24px;
                    ._spec_tab {
                        width: 100%;
                        height: 44px;
                        display: flex;
                        align-items: center;
                        background-color: rgba(242, 242, 242, 1);
                        ._spec_tab_title:nth-child(1) {
                            width: 43%;
                            box-sizing: border-box;
                            padding-left: 53px;
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            white-space: nowrap;
                            font-weight: 500;
                        }
                        ._spec_tab_title:nth-child(2) {
                            width: 41%;
                            box-sizing: border-box;
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            white-space: nowrap;
                            font-weight: 500;
                        }
                        ._spec_tab_title:nth-child(3) {
                            width: 16%;
                            box-sizing: border-box;
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            white-space: nowrap;
                            font-weight: 500;
                        }
                    }
                    ._spec_add {
                        width: 100%;
                        height: 36px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 1px rgba(184, 184, 184, 1) dashed;
                        color: rgba(32, 160, 255, 1);
                        font-size: 14px;
                        font-weight: 500;
                        background-color: #ffffff;
                        cursor: pointer;
                        border-radius: 4px;
                        margin-top: 24px;
                        i{
                            color: rgba(32, 160, 255, 1);
                            font-weight: 500;
                        }
                    }
                    ._spec_confirm {
                        border: 1px rgba(32, 160, 255, 1) solid;
                        width: 100%;
                        text-align: center;
                        color: rgba(32, 160, 255, 1);
                        height: 36px;
                        font-size: 14px;
                        line-height: 36px;
                        cursor: pointer;
                        margin-top: 20px;
                        border-radius: 4px;
                        background-color: rgba(240, 248, 255, 1);
                    }
                    ._spec_items {
                        width: 100%;
                        display: flex;
                        ._spec_main {
                            width: 43%;
                            height: 36px;
                            margin-top: 16px;
                            margin-bottom: 16px;
                            display: flex;
                            align-items: center;
                            .icon-check_box_sel {
                                font-size: 15px;
                                color: rgba(32, 160, 255, 1);
                                cursor: pointer;
                                margin: 0 24px 0 15px;
                            }
                        }
                        ._spec_children {
                            width: 57%;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            box-sizing: border-box;
                            ._spec_child {
                                width: 100%;
                                height: 36px;
                                margin-top: 16px;
                                display: flex;
                                align-items: center;
                                ._spec_button {
                                    width: 27.9%;
                                    color: rgba(24, 144, 255, 1);
                                    font-size: 14px;
                                    display: flex;
                                    align-items: center;
                                    cursor: pointer;
                                    ._spec_remove {
                                        color: rgba(24, 144, 255, 1);
                                        font-size: 14px;
                                        cursor: pointer;
                                        font-weight: 500;
                                        white-space: nowrap;
                                    }
                                    ._spec_new_add {
                                        color: rgba(24, 144, 255, 1);
                                        font-size: 14px;
                                        cursor: pointer;
                                        margin-left: 20px;
                                        font-weight: 500;
                                        white-space: nowrap;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            ._spec_sku {
                width: 100%;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                background-color: #F8F8F8;
                border: 1px rgba(238, 238, 238, 1) solid;
                border-radius: 4px;
                margin-top: 16px;
                padding: 24px 24px 0 24px;
                display: flex;
                flex-direction: column;
                ._spec_sku_items {
                    width: 100%;
                    display: flex;
                    align-items: flex-start;
                    ._spec_sku_number {
                        color: rgba(102, 102, 102, 1);
                        font-size: 14px;
                        line-height: 24px;
                    }
                    ._spec_sku_content {
                        color: rgba(102, 102, 102, 1);
                        font-size: 14px;
                        line-height: 24px;
                    }
                }
                ._sku_tab {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    ._sku_batch {
                        width: 100%;
                        height: 36px;
                        display: flex;
                        margin-top: 20px;
                        margin-bottom: 25px;
                        ._sku_batch_title {
                            width: 72px;
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            font-weight: 500;
                            white-space: nowrap;
                        }
                        ._sku_batch_title2 {
                            width: 72px;
                            color: rgba(24, 144, 255, 1);
                            font-size: 14px;
                            font-weight: 500;
                            white-space: nowrap;
                            cursor: pointer;
                        }
                        ._sku_input {
                            margin-right: 10px;
                        }
                        ._sku_first_input {
                            margin-left: 10px;
                        }
                    }
                    ._sku_header {
                        width: 100%;
                        height: 44px;
                        display: flex;
                        align-items: center;
                        background-color: rgba(242, 242, 242, 1);
                        box-sizing: border-box;
                        ._sku_header_item:nth-child(1) {
                            width: 18.3%;
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            font-weight: 500;
                            box-sizing: border-box;
                            padding-left: 14px;
                        }
                        ._sku_header_item:nth-child(2) {
                            width: 10%;
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            font-weight: 500;
                            box-sizing: border-box;
                            padding-left: 0px;
                        }
                        ._sku_header_item:nth-child(3) {
                            width: 10%;
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            font-weight: 500;
                            box-sizing: border-box;
                            padding-left: 0px;
                        }
                        ._sku_header_item:nth-child(4) {
                            width: 10%;
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            font-weight: 500;
                            box-sizing: border-box;
                            padding-left: 0px;
                        }
                        ._sku_header_item:nth-child(5) {
                            width: 10%;
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            font-weight: 500;
                            box-sizing: border-box;
                            padding-left: 0px;
                        }
                        ._sku_header_item:nth-child(6) {
                            width: 10%;
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            font-weight: 500;
                            box-sizing: border-box;
                            padding-left: 0px;
                        }
                        ._sku_header_item:nth-child(7) {
                            width: 10%;
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            font-weight: 500;
                            box-sizing: border-box;
                            padding-left: 0px;
                        }
                        ._sku_header_item:nth-child(8) {
                            width: 12.9%;
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            font-weight: 500;
                            box-sizing: border-box;
                            padding-left: 0px;
                        }
                        ._sku_header_item:nth-child(9) {
                            width: 8.8%;
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            font-weight: 500;
                            box-sizing: border-box;
                            padding-left: 0px;
                        }
                    }
                }
                ._sku_content {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;
                    ._sku_no_data {
                        color: rgba(153, 153, 153, 1);
                        font-size: 14px;
                        width: 100%;
                        height: 68px;
                        text-align: center;
                        line-height: 68px;
                    }
                    ._skus {
                        width: 100%;
                        box-sizing: border-box;
                        padding: 16px 0px;
                        display: flex;
                        align-items: center;
                        ._skus_spec_wrap {
                            width: 18.3%;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            padding-left: 14px;
                            box-sizing: border-box;
                            ._skus_spec {
                                width: 100%;
                                display: flex;
                                align-items: flex-start;
                                box-sizing: border-box;
                                padding-right: 16px;
                                ._skus_spec_name {
                                    color: rgba(85, 85, 85, 1);
                                    font-size: 14px;
                                    line-height: 20px;
                                }
                                ._skus_spec_value {
                                    color: rgba(153, 153, 153, 1);
                                    font-size: 14px;
                                    line-height: 20px;
                                }
                            }
                        }
                        ._skus_input1, ._skus_input2, ._skus_input3, ._skus_input4, ._skus_input5, ._skus_input6{
                            width: 10%;
                            box-sizing: border-box;
                            padding-right: 10px;
                        }
                        ._skus_input7 {
                            width: 10.8%;
                            box-sizing: border-box;
                            padding-right: 10px;
                        }
                        ._sku_images {
                            width: 9.9%;
                            ._skus_price {
                                width: 84px;
                                height: 84px;
                                position: relative;
                                overflow: hidden;
                                cursor: pointer;
                                ._skus_product_iamge {
                                    width: 84px;
                                    height: 84px;
                                }
                                ._skus_sel {
                                    width: 84px;
                                    height: 84px;
                                    position: absolute;
                                    left: 0;
                                    top: 0;
                                    z-index: 1;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    background-color: rgba(0,0,0,0.7);
                                    .el-icon-zoom-in {
                                        color: #fff;
                                        font-size: 22px;
                                        margin-right: 6px;
                                    }
                                    .el-icon-delete {
                                        color: #fff;
                                        font-size: 22px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .wrap-hasFreight {
                width: 100%;
                box-sizing: border-box;
                background:rgba(250,250,250,1);
                border-radius:4px;
                margin-right: 33px;
                padding: 15px 24px;
                &-list {
                    height: 32px;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin-bottom: 15px;
                    &-kg {
                        position: relative;
                        left: -36px;
                        z-index: 99999;
                        font-size: 14px;
                        color: rgba(0,0,0,0.25);
                    }
                    &-desc {
                        font-size: 14px;
                        color: #999;
                        white-space: nowrap;
                    }
                }
                &-list:nth-child(2){
                    margin-bottom: 0;
                }
            }
            ._third_upload {
                width: 90px;
                height: 90px;
                overflow: hidden;
                ._third_upload_wrap {
                    width: 90px;
                    height: 90px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    border: 1px rgba(151, 151, 151, 1) dashed;
                    position: relative;
                    justify-content: center;
                    background-color: #ffffff;
                    .icon-shangchuan {
                        font-size: 18px;
                        color: rgba(32, 160, 255, 1);
                        width: 19px;
                        height: 19px;
                        position: absolute;
                        top: 23px;
                    }
                    ._third_text {
                        color: rgba(136, 144, 156, 1);
                        font-size: 12px;
                        height: 22px;
                        line-height: 22px;
                        margin-top: 14px;
                    }
                }
                ._third_cover {
                    width: 90px;
                    height: 90px;
                    cursor: pointer;
                }
            }
        }
    }
    .dialogCommision {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        &-wrap {
            width: 512px;
            height: 358px;
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #fff;
            border-radius: 4px;
            padding: 0 32px;
            .el-icon-close {
                color: #C0CCDA;
                font-size: 18px;
                position: absolute;
                font-weight: bold;
                top: 20px;
                right: 20px;
                cursor: pointer;
            }
            &-title {
                color: #333333;
                font-size: 16px;
                font-weight: 500;
                margin: 40px 0 16px 0;
            }
            &-text {
            color: #333333;
            font-size: 14px;
            letter-spacing: 0.5px;
            line-height: 22px;
            }
        }
    }
    ._foot {
        width: 100%;
        height: 80px;
        ._foot_bg {
            width: 100%;
            height: 12px;
            background-color: rgba(240, 242, 247, 1);
        }
        ._foot_wrap {
            width: 100%;
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: center;
            ._cancel {
                width: 120px;
                height: 36px;
                border: 1px rgba(216, 216, 216, 1) solid;
                border-radius: 18px;
                text-align: center;
                line-height: 36px;
                color: rgba(96, 105, 114, 1);
                font-size: 14px;
                cursor: pointer;
                margin-right: 32px;
            }
            ._save {
                width: 120px;
                height: 36px;
                border-radius: 18px;
                text-align: center;
                line-height: 36px;
                background-color: rgba(32, 160, 255, 1);
                font-size: 14px;
                cursor: pointer;
                color: #ffffff;
                font-size: 14px;
            }
        }
    }
}
</style>

<style lang="less">
* {
    scroll-behavior: smooth;
}
.goodEditGroup {
    .el-tabs__header {
        margin-bottom: 0px;
        height: 47px;
        .el-tabs__item {
            height: 47px;
        }
        .el-tabs__nav-wrap::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0px;
            background-color: #E4E7ED;
            z-index: 1;
        }
    }
    .el-tabs {
        -webkit-box-shadow: none;
        box-shadow: none;
        outline: none;
    }
    .el-form-item {
        margin-bottom: 16px;
    }
    ._skus_upload {
        .el-upload--picture-card {
            width: 84px;
            height: 36px;
            overflow: hidden;
            line-height: 36px;
            border: 1px rgba(32, 160, 255, 1) solid;
            border-radius: 2px;
            color: rgba(24, 144, 255, 1);
            font-size: 14px;
            ._skus_upload_button {
                width: 84px;
                height: 36px;
                overflow: hidden;
                line-height: 36px;
                color: rgba(24, 144, 255, 1);
                font-size: 14px;
            }
        }
    }
    ._skus {
        .el-input__inner {
            padding: 0 4px;
            text-align: center;
        }
    }
    .service-tip-pop{
        background-color: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-bottom: 20px;
        .popper__arrow{
            display: none;
        }
    }
    ._third_upload {
        .el-upload--picture-card {
            width: 90px;
            height: 90px;
            line-height: 0px;
            border: none;
        }
    }
}
.el-tooltip__popper.is-light {
    border: none;
}
</style>